<template>
  <div class="mb-10px flex justify-between">
    <SearchForm @query="fetchOrgTree" class="header_left"></SearchForm>
    <Button v-per="'add'" type="primary" @click="handleCreate">新增组织</Button>
  </div>
  <div class="">
    <Table
      class="main-table"
      :dataSource="rea.orgList"
      :columns="columns"
      :pagination="false"
      :bordered="true"
      :loading="loading"
      rowKey="id"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'isBuiltIn'">
          <span v-if="record.isBuiltIn"> 是 </span>
          <span v-else> 否 </span>
        </template>
      </template>
      <template #action="{ record }">
        <span v-per="'addByParent'">
          <a @click="onAdd(record)"><UsergroupAddOutlined /></a>
        </span>

        <span v-per="'update'">
          <a @click="onEdit(record)" v-if="record.parentId !== null"><Divider type="vertical" /><EditOutlined /></a>
        </span>

        <span v-per="'delete'">
          <Popconfirm title="是否确认删除?" cancel-text="取消" ok-text="确认" @confirm="onDelete(record.id)">
            <a v-show="!record.isBuiltIn"><Divider type="vertical" /><DeleteOutlined /></a>
          </Popconfirm>
        </span>
      </template>
    </Table>
    <Form :visible="modelVisible" :type="modelType" :org="selectOrg" @close="handleSuccess"></Form>
  </div>
</template>

<script setup lang="ts">
import { Table, Popconfirm, message, Button, Divider } from 'ant-design-vue';
import SearchForm from './searchForm.vue';
import { reactive, ref } from 'vue';
import { columns } from './organization.data';
import { deleteSaaSOrg, getSaaSOrgTree } from '/@/api/organization-mgmt/organization';
import Form from './component/form.vue';
import { UsergroupAddOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';

const loading = ref(true);
interface SaaSOrgParams {
  name?: string;
}
let rea = reactive<{ orgList: any[] }>({ orgList: [] });

async function fetchOrgTree(_params: SaaSOrgParams) {
  try {
    let res = await getSaaSOrgTree(_params);
    rea.orgList = res;
  } finally {
    loading.value = false;
  }
}
fetchOrgTree({ name: '' });

async function handleDelete(key: string) {
  const res = await deleteSaaSOrg(key);
  if (res) {
    message.success('删除组织成功！');
  } else {
    message.error('删除组织失败！');
  }
  fetchOrgTree({ name: '' });
}
let modelVisible = ref(false);
function openModel() {
  modelVisible.value = true;
}
function closeModel() {
  modelVisible.value = false;
}
const selectOrg = ref({});
const modelType = ref();
const onAdd = (org: any) => {
  selectOrg.value = org;
  modelType.value = 3;
  openModel();
};
const onEdit = (org: any) => {
  selectOrg.value = org;
  modelType.value = 2;
  openModel();
};
const handleCreate = () => {
  modelType.value = 1;
  selectOrg.value = {};
  openModel();
};
const onDelete = (key: string) => {
  handleDelete(key);
};
const handleSuccess = (val: string) => {
  closeModel();
  if (val && val === 'success') {
    fetchOrgTree({ name: '' });
  }
};
</script>
<style lang="less">
.header {
  height: 50px;
}
.header_left {
  width: 70px;
  float: left;
}
.title_left {
  float: left;
}
.title_right {
  float: right;
  margin-right: 5px;
}
</style>
